/**
 * 用canvas在图片上根据四个坐标画背景
 * @param {Array} imageUrl 
 * @param {Number} rectangles 四个点的坐标如
 * const rectangles = [
  {
	"lt": { "x": 1547, "y": 899 },
	"ld": { "x": 1546, "y": 961 },
	"rt": { "x": 1604, "y": 900 },
	"rd": { "x": 1603, "y": 962 }
  },
  {
	"lt": { "x": 1605, "y": 900 },
	"ld": { "x": 1604, "y": 962 },
	"rt": { "x": 1638, "y": 900 },
	"rd": { "x": 1637, "y": 962 }
  }
]
 * @return {Number} image 返回画好的图片地址
 */
export function createBgDiv(imageUrl, rectangles) {
	return new Promise((resolve, reject) => {
		// 创建一个图片元素
		const image = new Image();
		// 当图片加载完成后
		image.onload = function () {
			try {
				// 创建一个canvas元素
				const canvas = document.createElement('canvas');
				// 设置canvas的宽度和高度为图片的原始大小
				canvas.width = image.width;
				canvas.height = image.height;
				// 获取canvas的2D渲染上下文
				const ctx = canvas.getContext('2d');
				// 在绘制之前清空整个canvas
				ctx.clearRect(0, 0, canvas.width, canvas.height);
				// 在canvas上绘制图片
				ctx.drawImage(image, 0, 0);
				// 遍历矩形点坐标参数，绘制背景
				rectangles.forEach(rect => {
					// 计算矩形的宽度和高度
					const width = Math.abs(rect.rt.x - rect.lt.x);
					const height = Math.abs(rect.ld.y - rect.lt.y);
					// 设置填充颜色
					ctx.fillStyle = 'rgba(255,0,0,0.4)'; // 这里可以替换为你想要的颜色
					// 绘制填充矩形
					ctx.fillRect(rect.lt.x, rect.lt.y, width, height);
				});

				// 将canvas数据转换为URL
				const imageDataUrl = canvas.toDataURL();
				resolve(imageDataUrl);
			} catch (error) {
				reject(error);
			}
		};
		// 设置图片的源为传入的URL
		image.src = imageUrl;
		// image.crossOrigin= 'anonymous'
		// 处理图片加载错误
		image.onerror = function (error) {
			reject(error);
		};
	});
}

/**
 * 用canvas在图片上根据两个点坐标画线
 * @param {Array} imageUrl 
 * @param {Number} rectangle 包含两个点的坐标对象
 * const rectangle = {ld: {x: 112, y: 199}, rd: {x: 131, y: 199}} 
 * @return {Number} image 返回画好的图片地址
 */

export function clearLineDiv(imageUrl, rectangle) {
	return new Promise((resolve, reject) => {
		// 创建一个图片元素
		const image = new Image();
		// 当图片加载完成后
		image.onload = function () {
			try {
				// 创建一个canvas元素
				const canvas = document.createElement('canvas');
				// 设置canvas的宽度和高度为图片的原始大小
				canvas.width = image.width;
				canvas.height = image.height;
				// 获取canvas的2D渲染上下文
				const ctx = canvas.getContext('2d');
				// 在canvas上绘制图片
				ctx.drawImage(image, 0, 0);
				// 设置线的样式
				ctx.strokeStyle = '#7507FB'; // 线的颜色
				ctx.lineWidth = 5; // 线的宽度
				// 画线
				ctx.beginPath();
				ctx.moveTo(rectangle.ld.x, rectangle.ld.y); // 移动到左下点
				ctx.lineTo(rectangle.rd.x, rectangle.rd.y); // 画线到右下点
				ctx.stroke(); // 进行绘制
				// 将canvas数据转换为URL
				const imageDataUrl = canvas.toDataURL();
				resolve(imageDataUrl);
			} catch (error) {
				reject(error);
			}
		};
		// 设置图片的源为传入的URL
		image.src = imageUrl;
		// 处理图片加载错误
		image.onerror = function (error) {
			reject(error);
		};
	});
}